<template>
	<div class="main-container">
		<div class="shrink" v-show="hasWarning"></div>
		<div class="header-container">
			<h1>津房科技</h1>
		</div>
		<div class="tags-views-container">
			<router-link to="/media" class="tags-views-item">
				<div class="bim-icon bim-icon-zh"></div>
				<div class="text">综合监控</div>
			</router-link>
			<router-link to="/door" class="tags-views-item">
				<div class="bim-icon bim-icon-entry"></div>
				<div class="text">门禁管理</div>
			</router-link>
			<router-link to="/media" class="tags-views-item">
				<div class="bim-icon bim-icon-perimeter"></div>
				<div class="text">周界防范</div>
			</router-link>
			<router-link to="/personnel" class="tags-views-item">
				<div class="bim-icon bimicon-info" style="background-size: 50px auto"></div>
				<div class="text">人员信息</div>
			</router-link>
			<router-link to="/tower" class="tags-views-item">
				<div class="bim-icon bim-icon-tower"></div>
				<div class="text">塔吊管理</div>
			</router-link>
			<router-link to="/power" class="tags-views-item">
				<div class="bim-icon bim-icon-power"></div>
				<div class="text">电力监测</div>
			</router-link>
			<router-link to="" class="tags-views-item" title="待完善...">
				<div class="bim-icon bim-icon-environment"></div>
				<div class="text">环境监测</div>
			</router-link>

			<div class="mosaic-corner">
				<video autoplay muted loop playsinline>
					<source src="http://demo-dev.sadpu.com/assets/gif.mp4" type="video/mp4">
				</video>
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
				<!--<div class="column-flex">-->
				<!--<div class="square-block"></div>-->
				<!--<div class="square-block"></div>-->
				<!--</div>-->
			</div>
		</div>
		<div class="dashboard-container laotaner">
			<div class="laotaner-left">
				<div class="bim-row-laotaner">
					<div class="bim-col bim-col-520">
						<div class="card-panel card-panel-entry">
							<div class="module-title">进出入管理</div>
							<div class="module-body">
								<div class="personal">
									<transition-group
											tag="div"
											name="slide-fade">
										<div class="personal-item" v-for="item in listData" :key="item.id"
													:class="item.state == 'out' ? 'exit' : ''">
											<div class="item-profile">
												<img :src="item.logo" alt="">
											</div>
											<div class="item-main">
												<div class="item-type">{{ item.job_type }}</div>
												<div class="item-extra">
													<div class="item-name">{{ item.user_name }}</div>
													<div class="item-time">{{ item.created_at }}</div>
													<div class="item-status">{{ item.state == 'in' ? '进入' : '出场' }}</div>
												</div>
											</div>
											<a href="javascript:;" class="item-corner"></a>
										</div>
									</transition-group>
								</div>
							</div>
						</div>
						<div class="card-panel card-panel-tower">
							<div class="module-title">塔吊</div>
							<div class="module-body">
								<div class="main-tower">
									<div class="chart-select">
										<div class="laotaner-tabs">
											<div
													class="laotaner-tabs__item"
													v-for="(item, index) in laotanTabs"
													:class="item.number === num ? 'is-active' : ''"
													@mouseover="changeData(index)"
													:key="item.number">
												{{ item.name }}
											</div>
										</div>
									</div>
									<div class="data-info" :class="'isOther-' + other">
										<div class="data-info-item">
											<div class="icn-spin"></div>
											<div class="desc">
												<h1>{{ towerData.height }}m</h1>
												<p>高度 Height</p>
											</div>
										</div>
										<div class="data-info-item">
											<div class="icn-spin"></div>
											<div class="desc">
												<h1>{{ towerData.weight }}t</h1>
												<p>承重量 Weight</p>
											</div>
										</div>
										<div class="data-info-item">
											<div class="icn-spin"></div>
											<div class="desc">
												<h1>{{ towerData.range }}m</h1>
												<p>幅度 Range</p>
											</div>
										</div>
										<div class="data-info-item">
											<div class="icn-spin"></div>
											<div class="desc">
												<h1>{{ towerData.moment }}%</h1>
												<p>力矩 Moment</p>
											</div>
										</div>
										<div class="data-info-item">
											<div class="icn-spin"></div>
											<div class="desc">
												<h1>{{ towerData.dip_angle }}°</h1>
												<p>倾角 Dip</p>
											</div>
										</div>
										<div class="data-info-item">
											<div class="icn-spin"></div>
											<div class="desc">
												<h1>{{ towerData.angle }}°</h1>
												<p>回转角度 Rotation</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="bim-col bim-col-760">
						<div class="card-panel card-panel-map">
							<div class="module-title">整体区域地图</div>
							<div class="module-body">
								<!--<div id="container" class="map-container" style="height: 449px">-->
								<div class="map-container">
									<video autoplay muted loop playsinline>
										<source src="http://demo-dev.sadpu.com/uploads/media/bg-temp.mp4" type="video/mp4">
									</video>
									<transition
											name="zoom-in"
											mode="out-in">
										<div class="warning-panel" v-if="fullTime">
											<div class="warning-item" v-for="item in topMsgData" :key="item.id">
												<div class="warning-pic" :style="{'background-image': 'url(' + item.pic_url + ')'}"></div>
												<div class="warning-info">
													{{ item.event_msg }} {{ item.event_module }} {{ item.created_at }}
												</div>
											</div>
										</div>
									</transition>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bim-row-laotaner">
					<div class="bim-col bim-col-full">
						<div class="card-panel">
							<div class="chart-container">
								<div id="line-chart" ref="lineChartDiv" style="width: 100%;height: 100%;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="laotaner-right">
				<div class="bim-row-laotaner">
					<div class="bim-col bim-col-520">
						<div class="card-panel card-panel-environment">
							<div class="module-title">环境</div>
							<div class="module-body">
								<div class="env-container">
									<div class="env-left">
										<div class="env-li">
											<h3>{{ envData.tmp }}°C</h3>
											<p>温度</p>
										</div>
										<div class="env-li">
											<h3>{{ envData.pm25 }}</h3>
											<p>PM2.5</p>
										</div>
										<div class="env-li">
											<h3>{{ envData.hum }}%</h3>
											<p>湿度</p>
										</div>
										<div class="env-li">
											<h3>{{ envData.wind_sc }}级</h3>
											<p>风力</p>
										</div>
									</div>
									<div class="env-right">
										<div class="weather-block">
											<img :src="getIcon(envData.cond_code)" style="width: 36px;margin-left: -10px" v-if="envData.cond_code">
											<p>{{ envData.cond_txt }}</p>
										</div>
										<div class="week">{{ nowTimes.week }}</div>
										<div class="date">{{ nowTimes.yy }} 年 {{ nowTimes.mm }} 月 {{ nowTimes.dd }} 日</div>
										<div class="clock">
											<div class="hour">{{ nowTimes.hour }}</div>
											<div class="minute">{{ nowTimes.minute }}</div>
										</div>
									</div>
								</div>
							</div>
							<div class="env-corner"></div>
						</div>
						<div class="card-panel card-panel-perimeter">
							<div class="module-title">报警信息</div>
							<div class="module-body">
								<transition
										name="slide-fade2"
										mode="out-in">
									<div class="perimeter-item" v-for="item in topMsgData" :key="item.id">
										<div class="perimeter-detail">
											<h3 class="title">{{ item.event_msg }}</h3>
											<div class="type">{{ item.event_module }}</div>
											<div class="datetime">{{ item.created_at }}</div>
										</div>
										<div class="perimeter-pic">
											<img :src="item.pic_url" alt="" v-if="item.pic_url">
										</div>
									</div>
								</transition>
								<transition-group
										tag="div"
										name="slide-fade">
									<div class="perimeter-item" v-for="(item, index) in listMsgData" :key="item.id">
										<h3 style="
                      font-size: 20px;
                      color: rgb(216, 238, 254);
                      font-weight: normal;
                      margin: 12px 0 0;" :style="index === 0 ? 'margin: 30px 0 0' : ''">{{ item.event_msg }}
											<font style="color: #fe9127;margin: 0 8px;">{{ item.event_module }}</font>
											<br/>
											<font style="font-size: 14px;">{{ item.created_at }}</font></h3>
									</div>
								</transition-group>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-container">
			<p class="copyright">由<b>圣德堡（天津）科技有限公司</b>提供物联网及人工智能技术支持与服务</p>
		</div>
	</div>
</template>
<script>
import Velocity from 'velocity-animate'
import echarts from 'echarts'
import * as Three from 'three'
import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader'

export default {
	data() {
		return {
			show: true,
			stop: false,
			listData: [],
			topMsgData: [],
			listMsgData: [],
			towerData: {
				height: 0,
				weight: 0,
				range: 0,
				wind_speed: 0,
				moment: 0,
				dip_angle: 0,
				angle: 0
			},
			nowTimes: {
				yy: '0000',
				mm: '00',
				dd: '00',
				hour: '00',
				minute: '00',
				week: '星期'
			},
			camera: null,
			bigImage: null,
			scene: null,
			renderer: null,
			mesh: null,
			fullTime: false,
			envData: {
				id: 0,
				pm25: 25.6,
				hum: 36,
				wind_sc: 3,
				tmp: 25
			},
			interval: null,
			laotanTabs: [],
			tower_number: 0,
			num: 0,
			other: 0,
			hasWarning: false,
			electricData: {},
			powerName: '功率',
			hackReset: false,
			lineChartOrder: null,
			getSetOption: {
				title: {
					top: 20,
					text: '功率',
					textStyle: {
						fontWeight: 'normal',
						fontSize: 14,
						color: '#4eb9e6'
					},
					left: '20px'
				},
				tooltip: {
					trigger: 'axis',
					extraCssText: 'width: 170px'
				},
				grid: {
					top: 78,
					left: 60,
					right: 35,
					bottom: 20,
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 18,
						textStyle: {
							fontSize: 14,
							color: '#a2cfe5'
						},
						formatter: function (params) {
							var s = params.split(' ')
							if (s[1]) {
								return s[0] + '\n' + s[1]
							} else {
								return s[0]
							}
						}
					},
					axisTick: {
						show: false
					},
					splitArea: {
						show: true,
						areaStyle: {
							color: ['rgba(33, 77, 108, 0.2)', 'rgba(33, 77, 108, 0.5)']
						}
					},
					data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
				}],
				yAxis: [{
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 10,
						textStyle: {
							fontSize: 14,
							color: '#a2cfe5'
						}
					},
					splitNumber: 2,
					splitLine: {
						show: false
					}
				}],
				// visualMap: {
				//   show: false,
				//   dimension: 0,
				//   pieces: [{
				//     gt: 100,
				//     lte: 150,
				//     color: 'red'
				//   }]
				// },
				series: [
					{
						name: '功率',
						type: 'line',
						smooth: true,
						symbol: 'circle',
						symbolSize: 5,
						showSymbol: true,
						data: [0, 0, 0, 0, 0, 0, 0, 0],
						lineStyle: {
							normal: {
								width: 4,
								color: '#00d5af'
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0, 213, 175, 0.3)'
								}, {
									offset: 0.8,
									color: 'rgba(0, 213, 175, 0)'
								}], false),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10
							}
						},
						itemStyle: {
							normal: {
								color: 'rgb(0, 213, 175)',
								borderColor: 'rgba(0, 213, 175, 0.2)',
								borderWidth: 12
							}
						}
					}
				]
			}
		}
	},
	created() {
		const _self = this

		_self.getTowerListData()
		_self.setNowTimes()
		_self.getList()
		_self.getMessageList()
		_self.getEnv()
		_self.socketInit()
		_self.hackReset = true
	},
	mounted() {
		const _self = this
		setInterval(() => {
			_self.setNowTimes()
		}, 1000)

		// this.init()
		// this.animate()
		this.drawLineChart()
	},
	methods: {
		init() {
			const container = document.getElementById('container')
			// this.camera = new Three.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10)
			// this.camera.position.z = 0.6
			// this.scene = new Three.Scene()
			// const geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
			// const material = new Three.MeshNormalMaterial()
			// this.mesh = new Three.Mesh(geometry, material)
			// this.scene.add(this.mesh)
			//
			// this.renderer = new Three.WebGLRenderer({ antialias: true })
			// this.renderer.setSize(container.clientWidth, container.clientHeight)
			// container.appendChild(this.renderer.domElement)
			const _self = this
			_self.camera = new Three.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.01, 2000)
			_self.camera.position.z = 700
			_self.scene = new Three.Scene()
			let mtlLoader = new MTLLoader()
			let objLoader = new OBJLoader()

			mtlLoader.load('/site.mtl', (materials) => {
				materials.preload()
				objLoader.setMaterials(materials)
				objLoader.load('/site.obj', (obj) => {
					obj.scale.set(10, 10, 10)
					_self.scene.add(obj)
				})
			})

			_self.renderer = new Three.WebGLRenderer({antialias: true})
			// _self.renderer.setPixelRatio(window.devicePixelRatio)
			_self.renderer.setSize(container.clientWidth, container.clientHeight)
			container.appendChild(this.renderer.domElement)
		},
		animate() {
			// requestAnimationFrame(this.animate)
			// this.mesh.rotation.x += 0.01
			// this.mesh.rotation.y += 0.02
			// this.renderer.render(this.scene, this.camera)
			// renderer.render(scene, camera)
			// stats.update()
			// controls.update()
			// requestAnimationFrame(this.animate)
			this.renderer.render(this.scene, this.camera)
		},
		setNowTimes() {
			const myDate = new Date()
			this.nowTimes.yy = myDate.getFullYear()
			this.nowTimes.mm = myDate.getMonth() + 1
			this.nowTimes.dd = String(this.appendZero(myDate.getDate()))
			this.nowTimes.week = '星期' + '日一二三四五六'.charAt(myDate.getDay())
			this.nowTimes.hour = String(this.appendZero(myDate.getHours()))
			this.nowTimes.minute = String(this.appendZero(myDate.getMinutes()))
		},
		appendZero(obj) {
			return obj < 10 ? '0' + obj : obj
		},
		getTowerListData () {
			this.$http.get('/api/get_devices', { params: { device_type: 'tower' } }).then(res => {
				this.laotanTabs = res.data.data
				// this.num = res.data.data[0].number
			})
		},
		socketInit() {
			let ws = new WebSocket(this.$wsUrl)
			var _self = this
			ws.onmessage = evt => {
				// console.log('数据已接收...')
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')

				clearInterval(_self.interval)
				switch (res.module) {
					case 'env':
						_self.envData = res.data
						break
					case 'perimeter':
						if (!_self.fullTime) {
							_self.fullTime = true
						}
						if (!_self.hasWarning) {
							_self.hasWarning = true
						}
						_self.listMsgData.splice(_self.listMsgData.length - 1, 1)
						_self.listMsgData.splice(0, 0, _self.topMsgData[0])
						_self.topMsgData.splice(0, 1, res.data)
						_self.bigImage = _self.topMsgData[0].pic_url
						_self.interval = setInterval(() => {
							if (_self.fullTime) {
								_self.fullTime = false
							}
							if (_self.hasWarning) {
								_self.hasWarning = false
							}
						}, 8000)
						break
					case 'door':
						if (res.type === 'info') {
							_self.listData.splice(0, 1, res.data)
						} else if (res.type === 'warning') {
							if (!_self.fullTime) {
								_self.fullTime = true
							}
							if (!_self.hasWarning) {
								_self.hasWarning = true
							}

							_self.listMsgData.splice(_self.listMsgData.length - 1, 1)
							_self.listMsgData.splice(0, 0, _self.topMsgData[0])
							_self.topMsgData.splice(0, 1, res.data)
							_self.bigImage = _self.topMsgData[0].pic_url
						}

						_self.interval = setInterval(() => {
							if (_self.fullTime) {
								_self.fullTime = false
							}
							if (_self.hasWarning) {
								_self.hasWarning = false
							}
						}, 8000)
						break
					case 'car':
						if (!_self.fullTime) {
							_self.fullTime = true
						}
						if (!_self.hasWarning) {
							_self.hasWarning = true
						}
						_self.listMsgData.splice(_self.listMsgData.length - 1, 1)
						_self.listMsgData.splice(0, 0, _self.topMsgData[0])
						_self.topMsgData.splice(0, 1, res.data)
						_self.bigImage = _self.topMsgData[0].pic_url
						_self.interval = setInterval(() => {
							if (_self.fullTime) {
								_self.fullTime = false
							}
							if (_self.hasWarning) {
								_self.hasWarning = false
							}
						}, 8000)
						break
					case 'electric':
						if (res.type === 'info') {
							let electricData = res.data[24].data
							let seriesData = []
							let legendData = []
							let itemData = []
							const style = [
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#fa6843'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(250, 104, 67, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(250, 104, 67, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(250, 104, 67)',
											borderColor: 'rgba(250, 104, 67, 0.2)',
											borderWidth: 12
										}
									}
								},
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#f9ab3c'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(249, 171, 60, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(249, 171, 60, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(249, 171, 60)',
											borderColor: 'rgba(249, 171, 60, 0.2)',
											borderWidth: 12
										}
									}
								},
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#cce71d'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(204, 231, 29, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(204, 231, 29, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(204, 231, 29)',
											borderColor: 'rgba(204, 231, 29, 0.2)',
											borderWidth: 12
										}
									}
								},
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#73da4f'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(115, 218, 79, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(115, 218, 79, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(115, 218, 79)',
											borderColor: 'rgba(115, 218, 79, 0.2)',
											borderWidth: 12
										}
									}
								},
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#52daf3'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(82, 218, 243, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(82, 218, 243, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(82, 218, 243)',
											borderColor: 'rgba(82, 218, 243, 0.2)',
											borderWidth: 12
										}
									}
								},
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#5097da'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(80, 151, 218, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(80, 151, 218, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(80, 151, 218)',
											borderColor: 'rgba(80, 151, 218, 0.2)',
											borderWidth: 12
										}
									}
								},
								{
									lineStyle: {
										normal: {
											width: 4,
											color: '#00d5af'
										}
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: 'rgba(0, 213, 175, 0.3)'
											}, {
												offset: 0.8,
												color: 'rgba(0, 213, 175, 0)'
											}], false),
											shadowColor: 'rgba(0, 0, 0, 0.1)',
											shadowBlur: 10
										}
									},
									itemStyle: {
										normal: {
											color: 'rgb(0, 213, 175)',
											borderColor: 'rgba(0, 213, 175, 0.2)',
											borderWidth: 12
										}
									}
								}
							]
							for (var i = 0; i < electricData.length; i++) {
								legendData.push(electricData[i].name)
								itemData = {
									type: 'line',
									name: electricData[i].name,
									smooth: true,
									symbol: 'circle',
									symbolSize: 5,
									showSymbol: true,
									data: electricData[i].power,
								}
								Object.assign(itemData, style[i])
								seriesData.push(itemData)
							}
							// seriesData[0].markArea = {
							// 	data: [[{
							// 		name: '报警阀值(' + res.data[24].data[0]['power_overload_max'] + ')',
							// 		yAxis: res.data[24].data[0]['power_overload_max'],
							// 		itemStyle: {
							// 			color: 'rgba(234, 43, 43, 0.4)'
							// 		},
							// 		label: {
							// 			show: true,
							// 			position: 'insideBottom',
							// 			color: '#fff'
							// 		}
							// 	}, {
							// 		yAxis: '150'
							// 	}]]
							// }
							this.lineChartOrder.setOption({
								legend: {
									top: 20,
									icon: 'rect',
									itemWidth: 20,
									itemHeight: 10,
									itemGap: 50,
									data: legendData,
									right: '4%',
									textStyle: {
										fontSize: 14,
										color: '#a2cfe5'
									}
								},
								xAxis: [{
									data: res.data[24].time
								}],
								series: seriesData
							})
							// _self.hackReset = false
							// _self.$nextTick(() => {
							//   _self.hackReset = true
							// })
						} else if (res.type === 'warning') {
							if (!_self.fullTime) {
								_self.fullTime = true
							}
							if (!_self.hasWarning) {
								_self.hasWarning = true
							}
							_self.listMsgData.splice(_self.listMsgData.length - 1, 1)
							_self.listMsgData.splice(0, 0, _self.topMsgData[0])
							_self.topMsgData.splice(0, 1, res.data)
							_self.bigImage = _self.topMsgData[0].pic_url
						}

						_self.interval = setInterval(() => {
							if (_self.fullTime) {
								_self.fullTime = false
							}
							if (_self.hasWarning) {
								_self.hasWarning = false
							}
						}, 8000)
						break
					case 'tower':
						if (res.module === 'tower') {
							if (res.state === 'empty') return
							const self = this
							self.towerData = res.data
							self.num = res.data.number
						}
						break
					default:
						break
				}

				if (res.module !== 'env' && res.type !== 'info') {
					this.siteNotify = this.$notify({
						title: res.data.event_module,
						message: res.data.event_msg,
						duration: 4500,
						position: 'bottom-right',
						type: 'warning',
						onClick: () => {
							this.siteNotify.close()
						}
					})
				}
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		},
		getList() {
			this.$http.get('/api/door/inout_last', {params: {limit: 1}}).then(response => {
				this.listData = response.data.data
			})
		},
		getMessageList() {
			this.$http.get('/api/report_last', {params: {limit: 5}}).then(response => {
				this.topMsgData = response.data.data.slice(0, 1)
				this.listMsgData = response.data.data.slice(1)
			})
		},
		getEnv() {
			this.$http.get('/api/env').then(response => {
				this.envData = response.data.data
			})
		},
		beforeEnter: function (el) {
			el.style.opacity = 0
			el.style.height = 0
		},
		enter: function (el, done) {
			setTimeout(function () {
				Velocity(
						el,
						{opacity: 1, height: '80px'},
						{complete: done}
				)
			}, 500)
		},
		leave: function (el, done) {
			Velocity(
					el,
					{opacity: 0, height: 0},
					{complete: done}
			)
		},
		getIcon: function (data) {
			return 'http://demo-dev.sadpu.com/cond_icon/' + data + '.png'
		},
		changeData() {
			// this.num = data
		},
		drawLineChart() {
			const lineChartDiv = this.$refs.lineChartDiv
			this.lineChartOrder = echarts.init(lineChartDiv)
			this.lineChartOrder.setOption(this.getSetOption)
		}
	}
}
</script>
<style lang="scss" scoped>
.shrink {
	animation: glow .5s cubic-bezier(.445, .05, .55, .95) infinite alternate;
	width: 1920px;
	height: 1080px;
	position: absolute;
	box-shadow: inset 0 0 10px 6px rgba(255, 0, 0, .95);
}

@keyframes glow {
	0% {
		border: 0px solid #f00;
		/*box-shadow: 0 0 1px 2px rgba(255, 0, 0, .6), inset 0 0 1px 2px rgba(255, 0, 0, .6), 0 1px 0 #F04750;*/
	}
	100% {
		border: 4px solid #f00;
		/*box-shadow: 0 0 2px 3px rgba(255, 0, 0, .8), inset 0 0 2px 3px rgba(255, 0, 0, .8), 0 1px 0 #f00;*/
	}
}

.tags-views-container {
	position: relative;
	display: flex;
	padding: 25px 40px 20px 40px;
}

.tags-views-item {
	margin: 0 38px;

	.text {
		color: #4eb9e6;
		font-size: 14px;
		text-align: center;
		margin-top: 10px;
		transition: all .3s ease;
	}

	&:hover {
		.bim-icon {
			transform: scale(1.1);
		}

		.text {
			transform: translateY(2px);
		}
	}
}

.mosaic-corner {
	position: absolute;
	right: 40px;
	bottom: 25px;
	display: flex;
	width: 280px;
	height: 75px;

	video {
		width: 100%;
		height: 100%;
		mix-blend-mode: screen;
		object-fit: none;
	}
}

.column-flex {
	display: flex;
	width: 18px;
	flex-flow: column-reverse;
	margin: 0 2px;
}

.square-block {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background-color: #3983bc;

	&:nth-child(2) {
		background-color: #2e6e9b;
	}

	&:nth-child(3) {
		background-color: #124d6c;
	}

	&:nth-child(4) {
		background-color: #083754;
	}
}

.bim-icon {
	transition: all .3s ease;
	width: 70px;
	height: 70px;
	background-color: rgba($color: #214d6c, $alpha: .5);
	border-radius: 50%;

	&-power {
		background-image: url("../../assets/icn-power.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	&-perimeter {
		background-image: url("../../assets/icn-perimeter.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	&-zh {
		background-image: url("../../assets/zh.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	&-entry {
		background-image: url("../../assets/icn-entry.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	&-environment {
		background-image: url("../../assets/icn-environment.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	&-tower {
		background-image: url("../../assets/icn-tower.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
}

.bim-row {
	padding-left: 40px;
	padding-right: 40px;
	display: flex;

	& + & {
		margin-top: 20px;
	}

	&-laotaner {
		display: flex;

		& + & {
			margin-top: 20px;
		}

		.card-panel-perimeter {
			height: 540px;
		}
	}
}

.laotaner {
	display: flex;
	padding-left: 40px;
	padding-right: 40px;

	&-left {
		width: 1300px;
	}

	&-right {
		margin-left: 20px;
	}

	&-tabs {
		width: 140px;

		&__item {
			position: relative;
			width: 100px;
			height: 40px;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #be4a3a;
			color: #fff;
			cursor: pointer;
			transition: all .5s ease;

			&:nth-child(2) {
				background-color: #cc8630;
			}

			&:nth-child(3) {
				background-color: #679ba6;
			}

			&:nth-child(4) {
				background-color: #d18563;
			}

			&:nth-child(5) {
				background-color: #8fc9af;
			}

			&.is-active {
				width: 140px;
				justify-content: flex-end;
				padding-right: 10px;

				&::before {
					width: 0;
					height: 0;
					content: '';
					position: absolute;
					left: 28px;
					border-width: 6px 0 6px 10px;
					border-style: solid;
					border-color: transparent transparent transparent #fff;
				}
			}
		}
	}
}

.bim-col {
	&-520 {
		width: 520px;
	}

	&-760 {
		width: 760px;
	}

	&-full {
		width: 100%;
	}

	& + & {
		margin-left: 20px;
	}
}

.card-panel {
	background-color: rgba($color: #214d6c, $alpha: 0.5);

	&-entry {
		height: 190px;
	}

	&-tower {
		height: 330px;
	}

	&-map {
		height: 540px;
	}

	&-environment {
		height: 260px;
	}

	&-perimeter {
		height: 260px;
	}

	& + & {
		margin-top: 20px;
	}
}

.module-title {
	color: #4eb9e6;
	font-size: 14px;
	padding: 20px 0 30px 20px;
}

.personal {
	height: 80px;
	overflow: hidden;

	&-item {
		position: relative;
		width: 450px;
		height: 80px;
		margin-left: 35px;
		border-radius: 40px 0 0 40px;
		display: flex;
		transition: all 1s;
		float: left;

		&.exit {
			* {
				color: #8398a9 !important;
			}
			//.item-profile {
			//	img {
			//		filter: grayscale(100%);
			//	}
			//}
		}
	}
}

.item-profile {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #45678a;
	padding: 2px;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}

.item-main {
	background-color: rgba($color: #2e6384, $alpha: .5);
	background-color: rgba(46, 99, 132, 0.5);
	flex: 1;
	padding-left: 55px;
	margin-left: 40px;
}

.item-extra {
	display: flex;
	align-items: flex-end;
	margin-top: 2px;
}

.item-type {
	font-size: 18px;
	color: #a2cfe5;
	line-height: 24px;
	margin-top: 12px;
}

.item-name {
	font-size: 24px;
	color: #d8eefe;
}

.item-time {
	font-size: 18px;
	color: #a2cfe5;
	margin: 0 12px;
}

.item-status {
	font-size: 20px;
	color: #00d5af;
}

.item-corner {
	background: url("../../assets/icn-share.png") no-repeat;
	width: 26px;
	height: 26px;
	position: absolute;
	right: 33px;
	top: 14px;
}

.main-tower {
	display: flex;
}

.chart-select {
	width: 256px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.data-info {
	width: 264px;
	display: flex;
	flex-wrap: wrap;

	&-item {
		position: relative;
		width: 50%;
		padding-left: 26px;
		transition: all .5s ease;
	}

	.desc {
		h1 {
			font-size: 22px;
			color: #d8eefe;
			margin: 0;
		}

		p {
			font-size: 12px;
			color: #a2cfe5;
		}
	}

	&.isOther {
		&-0 {
			.icn-spin {
				background-color: rgba($color: #be4a3a, $alpha: .2);

				&::before {
					background-color: #be4a3a;
				}
			}
		}

		&-1 {
			.icn-spin {
				background-color: rgba($color: #cc8630, $alpha: .2);

				&::before {
					background-color: #cc8630;
				}
			}
		}

		&-2 {
			.icn-spin {
				background-color: rgba($color: #679ba6, $alpha: .2);

				&::before {
					background-color: #679ba6;
				}
			}
		}

		&-3 {
			.icn-spin {
				background-color: rgba($color: #d18563, $alpha: .2);

				&::before {
					background-color: #d18563;
				}
			}
		}

		&-4 {
			.icn-spin {
				background-color: rgba($color: #8fc9af, $alpha: .2);

				&::before {
					background-color: #8fc9af;
				}
			}
		}
	}
}

.icn-spin {
	position: absolute;
	background-color: rgba($color: #2dfff5, $alpha: .2);
	border-radius: 50%;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .3s ease;

	&::before {
		display: block;
		content: '';
		background-color: #2dfff5;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}
}

.card-panel-environment {
	position: relative;
}

.env-container {
	display: flex;
}

.env {
	&-left {
		width: 210px;
		overflow: hidden;
	}

	&-li {
		width: 50%;
		float: left;
		text-align: right;

		h3 {
			font-size: 26px;
			color: #d8eefe;
			margin: 0;
		}

		p {
			font-size: 16px;
			color: #a2cfe5;
		}
	}

	&-right {
		position: relative;
		padding-left: 85px;
		color: #60e3fb;
		font-size: 16px;
		padding-right: 70px;
		flex: 1;

		.weather-block {
			margin-top: 10px;

			img {
			}

			p {
				margin: 20px 0 0;
			}
		}

		.week {
			margin-top: 15px;
		}

		.date {
			margin-top: 15px;
		}

		.clock {
			position: absolute;
			font-size: 74px;
			line-height: 64px;
			right: 70px;
			top: 0;
		}
	}

	&-corner {
		position: absolute;
		width: 36px;
		height: 36px;
		right: 29px;
		top: 17px;
		background: url("../../assets/icn-moment.png") no-repeat;
	}
}

.map-container {
	position: relative;
	margin: 0 20px 20px;

	video {
		display: block;
		width: 720px;
		height: 449px;
		background-color: #000;
	}
}

.warning-panel {
	position: absolute;
	display: flex;
	align-items: center;
	left: 0;
	top: 0;
}

.warning-item {
	position: relative;

	.warning-pic {
		width: 720px;
		height: 449px;
		background-size: cover;
	}

	.warning-info {
		position: absolute;
		width: 100%;
		bottom: 45px;
		background-color: rgba(0, 0, 0, 0.5);
		font-size: 18px;
		color: #fff;
		padding: 18px 0 18px 20px;
		text-align: center;
		letter-spacing: 2px;
	}
}

.warning-hide {
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	width: 100%;
	height: 100%;
	/*display: none;*/
}

.show_in {
	animation: go_in 1s;
	opacity: 1;
	visibility: visible;
	z-index: 20;
	width: 100%;
	height: 100%;
}

.show_out {
	animation: go_out 1s;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	width: 100%;
	height: 100%;
}

@keyframes go_in {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes go_out {
	0% {
		opacity: 1;
		transform: scale(1);
		visibility: visible;
	}
	100% {
		opacity: 0;
		transform: scale(0);
	}
}

.perimeter {
	&-item {
		display: flex;
		padding-left: 20px;
		padding-right: 30px;
	}

	&-detail {
		flex: 1;
		padding-right: 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 148px;

		.title {
			font-size: 22px;
			color: #d8eefe;
			font-weight: normal;
			margin: 0;
		}

		.type {
			font-size: 26px;
			color: #fe9127;
		}

		.datetime {
			font-size: 16px;
			color: #a2cfe5;
		}
	}

	&-pic {
		padding: 4px;
		background-color: #1f527b;
		max-height: 148px;

		img {
			width: 250px;
			height: 140px;
		}
	}
}

.main-container {
	background: url("../../assets/bg.png") no-repeat 50% 50% #072849;
	width: 1920px;
	height: 1080px;
	margin: 0 auto;
}

.header-container {
	background-color: rgba($color: #093c5b, $alpha: .5);
	height: 60px;
	padding-left: 40px;

	h1 {
		font-size: 24px;
		color: #d8eefe;
		line-height: 60px;
		font-weight: normal;
	}
}

.footer-container {
	.copyright {
		text-align: center;
		color: rgba($color: #92bfe0, $alpha: .5);
		font-size: 18px;
		line-height: 60px;

		b {
			color: rgba($color: #add8f8, $alpha: .5);
			font-weight: 500;
			letter-spacing: 2px;
			margin: 0 8px;
		}
	}
}

.chart-container {
	position: relative;
	width: 100%;
	height: 260px;
}
</style>
